$(function () {
  getUseBar();
  oilUseLine();
  waitGetUseBar();
  measureBar();
  oilCountBar();
  finalAccountsBar();
  monthDeliveryLine();
  surplusStockPie();
  totalStockGauge();
});

// function Bar() {
//   var myChart = echarts.init(document.getElementById('classChart'));

//   myChart.setOption(option);
// }

// 油料领用情况
function getUseBar() {
  var myChart = echarts.init(document.getElementById('getUse'));
  option = {
    title: {
      text:'油料领用情况',
      left: 'center',
      top: '8%',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    color: ['#6bf8ff', '#a868fd'], // 必须在上面
    grid: {   // 直角坐标系内绘图网格
      left: '10%',  //grid 组件离容器左侧的距离
      top: '20%',
      right: '20%',
      bottom: '10%',
      containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候，
      // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
      //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
    },
    legend: {
      right: '5%',
      top: '5%',
      orient: 'vertical',
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {},
    xAxis: {
      name: '油品名',
      type: 'category',
      axisLine: { // 坐标轴轴线 
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: { // 坐标轴刻度
        show: false
      },
      data: ['#95', '#97', '-10#', '#92', '#87']
    },
    yAxis: {
      name: '容量(升)',
      type: 'value',
      min: 0,
      max: 500,
      interval: 100,
      splitLine: {show: false}, // grid 区域中的分隔线
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
    },
    series: [
      {
        name: '领取',
        type: 'bar',
        barGap: '10%', // 不同系列的柱间距离,柱子宽度的百分比
        data: [320, 332, 301, 334, 390]
      },
      {
        name: '使用',
        type: 'bar',
        barCategoryGap: '50%',
        data: [220, 182, 191, 234, 290]
      }
    ]
  };
  myChart.setOption(option);
}

// 油料使用
function oilUseLine() {
  var myChart = echarts.init(document.getElementById('oilUse'));
  option = {
    title: {
      text:'油料使用',
      left: 'center',
      top: '8%',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    color:['#6bf8ff','#de8dff'], // 必须在上面
    legend: {
      right: '5%',
      top: '5%',
      orient: 'vertical',
      textStyle: {
        color: '#fff'
      },
      data: ['车船', '部门']
    },
    grid: {   // 直角坐标系内绘图网格
      left: '10%',  //grid 组件离容器左侧的距离
      top: '20%',
      right: '20%',
      bottom: '10%',
      containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候，
      // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
      //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    xAxis: {
      name: '油品名',
      type: 'category',
      axisLine: { // 坐标轴轴线 
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: { // 坐标轴刻度
        show: false
      },
      data: ['#95', '#97', '-10#', '#92', '#87']
    },
    yAxis: {     
      name: '容量(升)',
      type: 'value',
      min: 0,
      max: 500,
      interval: 100,
      splitLine: {show: false}, // grid 区域中的分隔线
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
    },
    series: [{
      name: '车船',
      data: [120, 220, 101, 134, 90, 230, 210],
      type: 'line',
      smooth: true,
      itemStyle: { // 折线拐点标志的样式
        opacity: 0
      },
      areaStyle: {
        opacity: 0.3,
      }
    },{
      name: '部门',
      data: [220, 182, 191, 234, 290, 330, 310],
      type: 'line',
      smooth: true,
      itemStyle: { // 折线拐点标志的样式
        opacity: 0
      },
      areaStyle: {
        opacity: 0.3,
      }
    }]
  };
  myChart.setOption(option);
}

// 当前待领用
function waitGetUseBar() {
  var myChart = echarts.init(document.getElementById('waitGetUse'));
  option = {
    title: {
      text:'当前待领用',
      left: 'center',
      top: '8%',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    color: ['#00eafd'], // 必须在上面
    grid: {   // 直角坐标系内绘图网格
      left: '10%',  //grid 组件离容器左侧的距离
      top: '20%',
      right: '20%',
      bottom: '10%',
      containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候，
      // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
      //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
    },
    tooltip: {},
    xAxis: {
      name: '油品名',
      type: 'category',
      axisLine: { // 坐标轴轴线 
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: { // 坐标轴刻度
        show: false
      },
      data: ['#95', '#97', '-10#', '#92', '#87']
    },
    yAxis: {
      name: '容量(升)',
      type: 'value',
      min: 0,
      max: 500,
      interval: 100,
      splitLine: {show: false}, // grid 区域中的分隔线
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
    },
    series: [
      {
        name: '领取',
        type: 'bar',
        barWidth: 25,
        data: [320, 450, 301, 334, 390]
      }
    ]
  };
  myChart.setOption(option);
}

// 测量情况表
function measureBar() {
  var myChart = echarts.init(document.getElementById('measure'));
  // 指定图表的配置项和数据
  var option = {
    title: {
      text:'测量情况表',
      left: 'center',
      top: '8%',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    color: ['#1cfffb'], // 必须在上面
    grid: {   // 直角坐标系内绘图网格
      left: '10%',  //grid 组件离容器左侧的距离
      top: '20%',
      right: '20%',
      bottom: '10%',
      containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候，
      // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
      //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
    },
    tooltip: {
      formatter: (params) => {
        return `<span style="color:${params.color};font-size: 20px">● </span>`
          + params.name + params.seriesName + ' : ' + params.value;
      }
    },
    xAxis: {
      name: '油品名',
      type: 'category',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      data: ['#95', '#97', '-10#', '#92', '#87']
    },
    yAxis: {
      name: '容量(升)',
      type: 'value',
      min: 0,
      max: 500,
      interval: 100,
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '',
        type: 'bar',
        barWidth: 25,
        data: [260, 350, 300, 220, 200]
      },
      {
        name: '',
        type: 'bar',
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: '#00418E'
          }
        },
        barGap: '-100%',
        z: 0,
        barWidth: 25,
        data: [400, 400, 400, 400, 400]
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

// 油料清点表
function oilCountBar() {
  var myChart = echarts.init(document.getElementById('oilCount'));
  option = {
    title: {
      text:'油料清点表',
      left: 'center',
      top: '8%',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    color: ['#1cfffb', '#cc59f8'], // 必须在上面
    grid: {   // 直角坐标系内绘图网格
      left: '10%',  //grid 组件离容器左侧的距离
      top: '20%',
      right: '20%',
      bottom: '10%',
      containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候，
      // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
      //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
    },
    legend: {
      right: '5%',
      top: '5%',
      orient: 'vertical',
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {},
    xAxis: {
      name: '油品名',
      type: 'category',
      axisLine: { // 坐标轴轴线 
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: { // 坐标轴刻度
        show: false
      },
      data: ['#95', '#97', '-10#', '#92', '#87']
    },
    yAxis: {
      name: '容量(升)',
      type: 'value',
      min: 0,
      max: 500,
      interval: 100,
      splitLine: {show: false}, // grid 区域中的分隔线
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
    },
    series: [
      {
        name: '清点数',
        type: 'bar',
        barGap: '10%', // 不同系列的柱间距离,柱子宽度的百分比
        data: [320, 332, 301, 334, 390],
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 0, 0], //（顺时针左上，右上，右下，左下）
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1, // 右 下 左 上
              [{
                offset: 0, // 0%
                color: '#1cfffb'
              },{
                offset: 1, // 100%
                color: '#005CA9'
              }
              ]
            )
          }
        }
      },
      {
        name: '账面数',
        type: 'bar',
        barCategoryGap: '50%',
        data: [220, 182, 191, 234, 290],
        itemStyle: {
          normal: {
            barBorderRadius: [10, 10, 0, 0], //（顺时针左上，右上，右下，左下）
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1, // 右 下 左 上
              [{
                offset: 0, // 0%
                color: '#cc59f8'
              },{
                offset: 1, // 100%
                color: '#5240B5'
              }
              ]
            )
          }
        }
      }
    ]
  };
  myChart.setOption(option);
}

// 油料月度决算表
function finalAccountsBar() {
  var myChart = echarts.init(document.getElementById('finalAccounts'));
  option = {
    title: {
      text:'油料月度决算表',
      left: 'center',
      top: '8%',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    color: ['#9c9df6', '#24a9b1'], // 必须在上面
    grid: {   // 直角坐标系内绘图网格
      left: '10%',  //grid 组件离容器左侧的距离
      top: '20%',
      right: '20%',
      bottom: '10%',
      containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候，
      // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
      //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
    },
    legend: {
      right: '5%',
      top: '5%',
      orient: 'vertical',
      textStyle: {
        color: '#fff'
      }
    },
    tooltip: {},
    xAxis: {
      name: '油品名',
      type: 'category',
      axisLine: { // 坐标轴轴线 
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: { // 坐标轴刻度
        show: false
      },
      data: ['#95', '#97', '-10#', '#92', '#87']
    },
    yAxis: {
      name: '容量(升)',
      type: 'value',
      min: 0,
      max: 500,
      interval: 100,
      splitLine: {show: false}, // grid 区域中的分隔线
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
    },
    series: [
      {
        name: '收入',
        type: 'bar',
        barGap: '10%', // 不同系列的柱间距离,柱子宽度的百分比
        data: [320, 332, 301, 334, 390]
      },
      {
        name: '支出',
        type: 'bar',
        barCategoryGap: '50%',
        data: [220, 182, 191, 234, 290]
      }
    ]
  };
  myChart.setOption(option);
}

// 加油站月度出库
function monthDeliveryLine() {
  var myChart = echarts.init(document.getElementById('monthDelivery'));
  option = {
    title: {
      text:'加油站月度出库',
      left: 'center',
      top: '8%',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    color:['#0077dd','#00b553','#ff6da3','#848efe'], // 必须在上面
    legend: {
      right: '3%',
      top: '20%',
      orient: 'vertical',
      textStyle: {
        color: '#fff'
      },
      data: ['加油站1', '加油站2', '加油站3', '加油站4']
    },
    grid: {   // 直角坐标系内绘图网格
      left: '10%',  //grid 组件离容器左侧的距离
      top: '20%',
      right: '20%',
      bottom: '10%',
      containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候，
      // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
      //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    xAxis: {
      name: '油品名',
      type: 'category',
      axisLine: { // 坐标轴轴线 
        lineStyle: {
          color: '#fff'
        }
      },
      axisTick: { // 坐标轴刻度
        show: false
      },
      data: ['#95', '#97', '-10#', '#92', '#87']
    },
    yAxis: {     
      name: '容量(升)',
      type: 'value',
      min: 0,
      max: 500,
      interval: 100,
      splitLine: {show: false}, // grid 区域中的分隔线
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
    },
    series: [{
      name: '加油站1',
      data: [120, 220, 101, 134, 90, 230, 210],
      type: 'line',
      smooth: true,
      itemStyle: { // 折线拐点标志的样式
        opacity: 0
      }
    },{
      name: '加油站2',
      data: [220, 182, 191, 234, 290, 330, 310],
      type: 'line',
      smooth: true,
      itemStyle: { // 折线拐点标志的样式
        opacity: 0
      }
    },{
      name: '加油站3',
      data: [200, 250, 220, 150, 100, 260, 410],
      type: 'line',
      smooth: true,
      itemStyle: { // 折线拐点标志的样式
        opacity: 0
      }
    },{
      name: '加油站4',
      data: [100, 200, 260, 280, 300, 280, 260],
      type: 'line',
      smooth: true,
      itemStyle: { // 折线拐点标志的样式
        opacity: 0
      }
    }]
  };
  myChart.setOption(option);
}

// 油料剩余库存(升)
function surplusStockPie() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('surplusStock'));
  var data = [
    {
      name: '#96',
      value: 450,
      totalNum: 500
    },{
      name: '#97',
      value: 365,
      totalNum: 500
    },{
      name: '-10#',
      value: 224,
      totalNum: 500
    },{
      name: '#92',
      value: 397,
      totalNum: 500
    },{
      name: '#87',
      value: 297,
      totalNum: 500
    }]

  var titleArr= [];
  var seriesArr=[];
  data.forEach(function(item, index){
    titleArr.push(
      {
        text:item.name +'\n\n',
        left: index * 20 + 9+'%',
        bottom: -20,
        textAlign: 'center',
        textStyle: {
          fontWeight: 'normal',
          fontSize: '18',
          color: '#a1c4f5',
          textAlign: 'center'
        }
      }
    );
    seriesArr.push(
      {
        name: item.name,
        type: 'pie',
        clockWise: false,
        startAngle: 150,
        radius: [32, 35], // 可以控制粗细和图间距
        hoverAnimation: false,
        center: [index * 20 + 10 +'%', '35%'],
        data: [{
          value: item.totalNum-item.value,
          itemStyle: {
            color: '#fff'
          },
          labelLine: {
            show: false
          }
        },{
          value: item.value,
          label: {
            formatter: function(params){
              return params.value ;
            },
            position: 'center',
            show: true,
            fontSize: '20',
            color: '#a1c4f5'
          },
          itemStyle: {
            normal: {
              borderWidth:6,
              borderColor: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: '#33F3FC'
              }, {
                offset: 1,
                color: '#3592F7'
              }])
            }
          }
        }],
        silent: true
      }
    )
  });

  // 指定图表的配置项和数据
  var option =  {
    title:titleArr,
    series: seriesArr
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

// 当前总库存
function totalStockGauge() {
  var myChart = echarts.init(document.getElementById('totalStock'));
  option = {
    title: {
      text: '1号加油站',
      textStyle: {
        color: '#71dbff'
      }
    },
    tooltip: {
        formatter: "{a} <br/>{c} {b}"
    },
    toolbox: { //可视化的工具箱
        show: true,
        feature: {
            restore: { //重置
                show: false
            },
            saveAsImage: {//保存图片
                show: false
            }
        }
    },
    series : [
        {
            name: '当前总库存',
            type: 'gauge',
            z: 3,
            min: 0,
            max: 1000,
            splitNumber: 10, // 仪表盘刻度的分割段数
            radius: '100%', // 控制大小
            startAngle: 215,
            endAngle: -35,
            axisLine: {            // 坐标轴线，也就是圆弧
                lineStyle: {       // 圆弧样式
                    width: 15,
                    color: [
                    [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0.1,
                        color: "#00d1fa"
                      },
                      {
                        offset: 1,
                        color: "#b26bf8"
                      }
                    ])
                  ]
                ]
                }
            },
            axisTick: {            // 坐标轴小标记
                length: 5,        // 属性length控制线长
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: 'auto'
                }
            },
            splitLine: {           // 分隔线
                length: 10,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    color: 'auto'
                }
            },
            axisLabel: {
                distance: 10,
                color: '#73B5DC',
                padding: 3,
                textShadowBlur: 2,
                textShadowOffsetX: 1,
                textShadowOffsetY: 1,
                textShadowColor: '#222'
            },
            title: { // 仪表盘标题,显示data里的name
              color: '#14AEF9',
              fontSize: 20,
              offsetCenter:[0, '65%']
            },
            detail: { // 仪表盘详情，用于显示数据
              offsetCenter: [0, '30%'],
              formatter: function (value) {
                return '{a| '+value.toFixed(0)+'}'+'{b| 升}'
              },
              color: '#71dbff',
              fontSize: 15,
              padding: [15,2,2,2],
              rich: {
                a: {
                  color: '#fff',
                  fontSize: 35,
                },
                b: {
                  color: '#71dbff',
                  verticalAlign: 'middle'
                },
              }
            },
            pointer: { // 指针
              length: '80%'
            },
            data: [{value: 380, name: '当前总库存'}]
        },
    ]
};
  myChart.setOption(option);
}

